<template>
  <div class="container">
    <el-card class="box-card">

      <!-- 试题录入 -->

      <div slot="header" class="clearfix">
        <span>试题录入</span>
      </div>
      <el-form
        :model="formBase"
        :rules="rules"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学科" prop="subjectID">
          <el-select
            v-model.number="formBase.subjectID"
            placeholder="请选择"
            style="width: 400px"
            filterable
            allow-create
          >
            <el-option label="11" value="111"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select
            v-model.number="formBase.catalogID"
            placeholder="请选择"
            style="width: 400px"
            filterable
            allow-create
          >
            <el-option label="111" value="111"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterpriseID">
          <el-select
            v-model.number="formBase.enterpriseID"
            placeholder="请选择"
            style="width: 400px"
            filterable
            allow-create
          >
            <el-option label="44" value="44"></el-option>
          </el-select>
        </el-form-item>
        <div class="citys">
          <el-form-item label="城市" prop="province">
            <el-select
              v-model="formBase.province"
              placeholder="请选择"
              @change="handleProvince"
              style="width: 196px"
            >
              <el-option
                v-for="item in citySelect.province"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="city" style="width: 200px" class="city">
            <el-select
              v-model="formBase.city"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in citySelect.cityDate"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="方向" prop="direction">
          <el-select
            v-model="formBase.direction"
            placeholder="请选择"
            style="width: 400px"
          >
            <el-option label="o2o" value="o2o"></el-option>
            <el-option label="外包服务" value="外包服务"></el-option>
            <el-option label="企业服务" value="企业服务"></el-option>
            <el-option label="互联网进入" value="互联网进入"></el-option>
            <el-option label="企业咨询" value="企业咨询"></el-option>
            <el-option label="互联网" value="互联网"></el-option>
            <el-option label="电子商务" value="电子商务"></el-option>
            <el-option label="外包服务" value="外包服务"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="formBase.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="formBase.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" prop="question">
          <quill-editor v-model="formBase.question"></quill-editor>
        </el-form-item>
        <!-- <el-form-item label="选项" prop="options">
          <el-radio
            label="1"
            style="display: flex; align-items: center"
          >
            <span
              style="display: flex align-items: center; height: 60px;
              line-height: 60px;"
            >
              A:
              <el-input v-model="inputA" placeholder="请输入内容">
              </el-input>
              <el-upload
                style="display: inline-block"
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                class="updatePic"
              >
              </el-upload>
            </span> </el-radio
          ><br />
          <el-radio
            label="2"
            style="display: flex; align-items: center"
          >
            B:
            <span
              style="display: flex align-items: center; height: 60px; line-height: 60px"
            >
              <el-input v-model="inputB" placeholder="请输入内容">
              </el-input>
              <el-upload
                style="display: inline-block"
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                class="updatePic"
              >
              </el-upload>
            </span> </el-radio
          ><br />
          <el-radio
            label="3"
            style="display: flex; align-items: center"
          >
            C:
            <span
              style="display: flex align-items: center; height: 60px; line-height: 60px"
            >
              <el-input v-model="inputC" placeholder="请输入内容">
              </el-input>
              <el-upload
                style="display: inline-block"
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                class="updatePic"
              >
              </el-upload>
            </span> </el-radio
          ><br />
          <el-radio
            label="4"
            style="display: flex; align-items: center"
          >
            D:
            <span
              style="display: flex align-items: center; height: 60px; line-height: 60px"
            >
              <el-input v-model="inputD" placeholder="请输入内容">
              </el-input>
              <el-upload
                style="display: inline-block"
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                class="updatePic"
              >
              </el-upload>
            </span> </el-radio
          ><br />
        </el-form-item> -->
        <el-form-item prop="difficulty">
          <el-button type="danger" plain>+增加选项与答案</el-button>
        </el-form-item>
        <el-form-item label="解析视频" prop="videoURL" style="width: 500px">
          <el-input v-model="formBase.videoURL"></el-input>
        </el-form-item>
        <el-form-item label="答案解析" prop="answer">
          <quill-editor v-model="formBase.answer"></quill-editor>
        </el-form-item>
        <el-form-item label="题目备注" prop="remarks">
          <el-input type="textarea" v-model="formBase.remarks"></el-input>
        </el-form-item>
        <el-form-item label="试题标签" prop=" tags">
          <el-select
            v-model="formBase.tags"
            placeholder="请选择试题标签"
            style="width: 400px"
            filterable
            allow-create
          >
            <el-option label="好学" value="好学"></el-option>
            <el-option label="难学" value="难学"></el-option>
            <el-option label="还可以" value="还可以"></el-option>
            <el-option label="中等" value="中等"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="createData">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { add, update, detail } from '@/api/hmmm/questions.js'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      citySelect: {
        province: [],
        cityDate: []
      },
      inputA: '',
      inputB: '',
      inputC: '',
      inputD: '',
      formBase: {
        id: '', // id
        number: '', // 试题编号
        subjectID: '', // 学科
        catalogID: '', // 目录
        questionType: '', // 题型
        difficulty: '', // 难度
        province: '',
        city: '',
        tags: '', // 标签
        direction: '', // 方向
        question: '', // 题干
        options: [],
        videoURL: '', // 视频解析
        answer: '', // 答案解析
        remarks: '' // 题目备注
      },
      radio3: '1',
      rules: {
        subjectID: [{ required: true, message: '不能为空', trigger: 'blur' }],
        catalogID: [{ required: true, message: '不能为空', trigger: 'blur' }],
        enterpriseID: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        province: [{ required: true, message: '不能为空', trigger: 'blur' }],
        city: [{ required: true, message: '不能为空', trigger: 'blur' }],
        direction: [{ required: true, message: '不能为空', trigger: 'blur' }],
        questionType: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        difficulty: [{ required: true, message: '不能为空', trigger: 'blur' }],
        question: [{ required: true, message: '不能为空', trigger: 'blur' }],
        answer: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  async created () {
    this.getCityData()
    if (this.$route.query.id) {
      const id = this.$route.query.id
      const { data } = await detail({ id })
      this.formBase = { ...data }
      console.log(data)
    }
  },
  methods: {
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.formBase.city = this.citySelect.cityDate[0]
    },

    // 表单提交
    createData () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const data = {
            ...this.formBase
          }
          if (this.formBase.id) {
            update(data).then(() => {
              this.$message.success('修改成功')
              if (this.$route.query.type === 'choice') {
                this.$router.push('/questions/choice')
              } else {
                this.$router.push('/questions/list')
              }
            })
          } else {
            add(this.formBase).then(() => {
              if (this.$route.query.type === 'choice') {
                this.$message.success('恭喜你，添加成功')
                this.$router.push('/questions/choice')
              } else {
                this.$router.push('/questions/list')
              }
            })
          }
        } else {
          this.$message.error('*必须填写')
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.box-card {
  margin: 20px;
}
.quill-editor {
  ::v-deep .ql-editor {
    height: 300px;
  }
}
.citys {
  display: flex;
  align-items: center;
}
.city {
  /deep/.el-form-item__content {
    margin-left: 4px !important;
  }
}
/deep/.el-upload {
  width: 100px !important;
  height: 60px !important;
  border: 1px dashed #ccc;
}
/deep/.el-upload--picture-card {
  vertical-align: middle;
  margin-left: 5px;
}
</style>
